<!--
 * @Description: 
 * @Author: qingyang
 * @Date: 2023-07-13 12:00:04
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-21 18:31:20
-->
<template>
  <div
    class="c-alert g-flex-start-start"
    :class="[`c-alert--${type}`, `c-alert--${size}`]"
    v-if="visible"
  >
    <slot name="icon"></slot>
    <CIcon v-if="!$slots.icon" class="g-flex-shrink-0 c-alert-icon" type="c-mian-tishi"></CIcon>
    <div v-if="!$slots.default">
      <p class="g-font-14n1b alert-des" v-if="title">{{ title }}</p>
      <p class="g-font-14n2 alert-des" v-if="subtitle">{{ subtitle }}</p>
    </div>
    <slot></slot>
    <div class="c-close-btn" @click="handleClose" v-if="close">
      <CIcon type="c-xian-cha"></CIcon>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { withDefaults, defineProps, defineEmits, ref, computed } from 'vue';

type DoneFn = () => void;
type DialogBeforeCloseFn = (done: DoneFn) => void;
interface IProps {
  /**
   * 标题
   */
  title?: string;
  /**
   * 副标题
   */
  subtitle?: string;
  type?: 'warning' | 'error' | 'success' | 'info';
  size?: 'normal' | 'simple';
  close?: boolean;
  beforeClose?: DialogBeforeCloseFn;
}

const props = withDefaults(defineProps<IProps>(), {
  type: 'success',
  size: 'normal',
  title: '',
  close: false
});
const emits = defineEmits(['close']);
const visible = ref(true);
function doClose() {
  (visible.value = false), emits('close');
}
const handleClose = () => {
  function hide() {
    visible.value = false;
  }
  if (props.beforeClose) {
    props.beforeClose(hide);
  } else {
    doClose();
  }
};
</script>
